<!-- src/components/MultiLineInput.vue -->
<template>
  <div class="multiline-input">
    <textarea v-model="content" placeholder="请输入多行内容..." rows="5"></textarea>
    <p>当前内容：</p>
    <pre>{{ content }}</pre>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const content = ref('')
</script>

<style scoped>
.multiline-input {
  margin: 16px 0;
}
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
pre {
  background: #f4f4f4;
  padding: 12px;
  border: 1px solid #ddd;
  white-space: pre-wrap;
  word-break: break-word;
}
</style>
